<template>
	<view>
		<!-- 商品分类tab -->
		<view class="header">
			<scroll-view scroll-x scroll-left>
				<view class="cs " :class="{ active: category_id == 0 }" @tap="onSwitchTab" data-id="0"><text>首页</text></view>
				<!-- 商品分类列表 -->
				<view class="cs " :class="{ active: item.category_id == category_id }" @tap="onSwitchTab" v-for="item in categoryList" :key="item.category_id" :data-id="item.category_id">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 拼团商品列表 -->
		<view class="cont">
			<scroll-view bindscrolltolower="bindDownLoad" scroll-y :style="{ height: scrollHeight + 'px' }">
				<view class="main">
					<view class="main_goods" v-for="item in goodsList.data" :key="item.goods_id" @tap="onTargetGoods" :data-id="item.goods_id">
						<!-- 商品图片 -->
						<view class="main_goods_left"><image :src="item.goods_image"></image></view>
						<view class="main_goods_right">
							<!-- 商品标题 -->
							<view class="twolist-hidden">
								<text class="main_goods_title">{{ item.goods_name }}</text>
							</view>
							<!-- 商品信息 -->
							<view class="main_goods_desc">
								<view class="">
									<text class="desc_introduction onelist-hidden">{{ item.selling_point }}</text>
								</view>
								<text class="desc_situation">
									<text class="iconfont icon-pintuan_huaban"></text>
									<text class="people">{{ item.people }}人团</text>
									<text class="cl-9">已有{{ item.goods_sales }}人进行拼团</text>
								</text>
								<text class="desc_footer">
									<text class="price_x">¥{{ item.goods_sku.sharing_price }}</text>
									<text class="price_y cl-9">¥{{ item.goods_sku.line_price }}</text>
								</text>
							</view>
							<button class="settlement">去拼团</button>
						</view>
					</view>
					<view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
					<!-- 无数据提供的页面 -->
					<view v-if="!isLoading && !goodsList.data.length">
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无拼团商品哦</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			// 商品分类列表
			categoryList: [],
			// 拼团商品列表
			goodsList: { data: [] },
			// 当前的分类id (0则代表首页)
			category_id: 0,
			scrollHeight: null,
			option: {}, // 当前页面参数
			list: {}, // 商品列表数据
			no_more: false, // 没有更多数据
			isLoading: true, // 是否正在加载中
			page: 1 // 当前页码
		};
	},
	onLoad() {
		// Api：获取拼团首页
		this.setListHeight();
		this.getIndexData();
	},
	/**
	 * 分享当前页面
	 */
	onShareAppMessage: function() {
		return {
			title: '拼团首页',
			path: '/pages/sharing/index/index?' + Tools.getShareUrlParams()
		};
	},
	methods: {
		/**
		 * Api：获取拼团列表
		 */
		getIndexData() {
			this.$get(this.$api.getSharingIndex, {}, res => {
				this.categoryList = res.data.categoryList;
			});
			this.getGoodsList();
		},

		/**
		 * 设置商品列表高度
		 */
		setListHeight() {
			let systemInfo = wx.getSystemInfoSync();
			let tapHeight = uni.upx2px(98); // tap高度
			let scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
			this.scrollHeight = scrollHeight;
		},
		/**
		 * Api：切换导航栏
		 */
		onSwitchTab(e) {
			// 第一步：切换当前的分类id
			this.category_id = e.currentTarget.dataset.id;
			this.goodsList = { data: [] };
			this.page = 1;
			this.no_more = false;
			this.isLoading = true;

			// 第二步：更新当前的商品列表
			this.getGoodsList();
		},
		/**
		 * 跳转商品详情页
		 */
		onTargetGoods(e) {
			Route.navigateTo({
				url: '../goods/index?goods_id=' + e.currentTarget.dataset.id
			});
		},

		/**
		 * Api：获取商品列表
		 */
		getGoodsList(isPage, page) {
			this.$get(this.$api.getSharingGoodsList, { page: page || 1, category_id: this.category_id }, res => {
				let resList = res.data.list;
				let dataList = this.goodsList;
				if (isPage == true) {
					this.$set(this.goodsList, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.goodsList = resList;
					this.isLoading = false;
				}
			});
		},
		/**
		 * 下拉到底加载数据
		 */
		bindDownLoad() {
			// 已经是最后一页
			if (this.page >= this.goodsList.last_page) {
				this.no_more = true;
				return false;
			}
			// 加载下一页列表
			this.getGoodsList(true, ++this.page);
		}
	}
};
</script>

<style>
.cont {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.main {
	box-sizing: border-box;
	padding: 0 20rpx;
}

.main_goods {
	margin: 20rpx auto;
	padding: 20rpx;
	display: flex;
	height: 320rpx;
	background: #fff;
	box-sizing: border-box;
}

.main_goods_left {
	display: flex;
	width: 40%;
	height: 100%;
	background: #fff;
	align-items: center;
}

.main_goods_left image {
	display: block;
	width: 240rpx;
	height: 240rpx;
}

.main_goods_right {
	position: relative;
	width: 60%;
	height: 100%;
}

.main_goods_title {
	display: block;
	margin-top: 20rpx;
	width: 100%;
	font-size: 28rpx;
	line-height: 1.3;
	color: #333;
}

.main_goods_desc {
	position: absolute;
	left: 0rpx;
	top: 90rpx;
}

.main_goods_desc text {
	display: inline-block;
}

.desc_introduction {
	margin-top: 10rpx;
	line-height: 1.4;
	font-size: 24rpx;
	color: #ff495e;
	width: 400rpx;
}

.desc_situation {
	font-size: 24rpx;
	line-height: 1.3;
	color: rgb(240, 60, 60);
	margin-top: 10rpx;
}

.people {
	margin: 0 13rpx;
}

.cl-9 {
	color: #999;
}

.desc_footer {
	margin-top: 15rpx;
	font-size: 24rpx;
}

.desc_footer .price_x {
	margin-right: 25rpx;
	color: rgb(240, 60, 60);
	font-size: 28rpx;
}

.desc_footer .price_y {
	text-decoration: line-through;
}

.settlement {
	position: absolute;
	right: 0rpx;
	bottom: 0rpx;
	line-height: 55rpx;
	text-align: center;
	font-size: 28rpx;
	border-radius: 40rpx;
	color: #fff;
	background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
	box-shadow: 0px 2px 10px -2px rgb(235, 53, 107);
	border: none;
}

.header {
	display: flex;
	position: sticky;
	top: 0;
	width: 100%;
	height: 88rpx;
	color: #333;
	font-size: 28rpx;
	background: #fff;
	border-bottom: 1rpx solid #e4e4e4;
	z-index: 100;
	overflow: hidden;
	white-space: nowrap;
}

.header scroll-view {
	height: 100%;
}

.cs {
	display: inline-block;
	padding: 0 15rpx;
	text-align: center;
	min-width: 20%;
	height: 87rpx;
	line-height: 88rpx;
	box-sizing: border-box;
}

.cs text {
	display: block;
	height: 100%;
}

.active text {
	color: #fd4a5f;
	border-bottom: 2rpx solid #fd4a5f;
}
</style>
